<template>
  <div :class="['b-fast flex w-full relative',{
    'b-fast--disabled':disabled
  }]"
       data-key="fast">
    <ZCrumb @click.stop="onCollapse"
            :expand="!currentCollapse"
            v-if="crumb" />

    <div class="b-fast__wrapper relative"
         ref="scroll-pane"
         @wheel.passive="onScroll">
      <div class="b-fast__wrapper-sticky sticky inline-flex "
           v-if="stickyElements.length">
        <BFastItem v-for="(item,index) in stickyElements"
                   v-show="!isDefaultRole||(item.name === 'TEMPLATE'||item.name === 'Template Bots')"
                   :key="`sticky-${index}`"
                   :total="formatNum(item.total)"
                   :disabled="disabled"
                   :active="hasSelected(item)"
                   @click.native="onSelect(item)"
                   :content="formatLabel(item)" />
      </div>
      <BFastItem v-if="model !== 'selection'"
                 v-for="(item,index) in customElements"
                 :key="`custom-${index}`"
                 :disabled="disabled"
                 :total="formatNum(item.total)"
                 :suffix="action?'el-icon-close':undefined"
                 :active="hasSelected(item)"
                 @close="onDelete(item)"
                 @click.native="onSelect(item)"
                 :content="formatLabel(item)" />
    </div>

    <div class="b-quick-filter__action"
         v-if="action">
      <slot name="action">
        <BFastAction @event:guide="openFastMenu" />
      </slot>
    </div>
  </div>
</template>

<script>
import BFastItem from './b-fast-item'
import ZCrumb from '../z-crumb'
import BFastAction from './b-fast-action.vue'
import { isFunction } from 'lodash'

export default {
  name: 'BFast',
  components: {
    BFastItem,
    ZCrumb,
    BFastAction
  },
  inject: { dataFrom: { default: '' }, isDefaultRole: { default: false } },
  props: {
    crumb: {
      type: Boolean,
      default: true
    },
    action: {
      type: Boolean,
      default: true
    },
    options: {
      type: Array,
      default: () => ([])
    },
    disabled: Boolean,

    collapse: {
      type: Boolean,
      default: false
    },
    model: String,
    format: Function,
    formatTotal: Function,
    stickyFormat: Function,
    value: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    currentCollapse: {
      get () {
        return !!this.collapse
      },
      set (val) {
        this.$emit('update:collapse', val)
      }
    },
    stickyElements () {
      return this.options.filter(i => {
        if (isFunction(this.stickyFormat)) {
          return this.dataFrom === 'peergroup' ? this.stickyFormat(i) && i.name === 'TEMPLATE' : this.stickyFormat(i)
        }

        return this.dataFrom === 'peergroup' ? i.sticky && i.name === 'TEMPLATE' : i.sticky
      })
    },
    customElements () {
      return this.options.filter(i => {
        if (isFunction(this.stickyFormat)) {
          return !this.stickyFormat(i) && this.dataFrom !== 'peergroup'
        }

        return !i.sticky && this.dataFrom !== 'peergroup'
      })
    }

  },
  methods: {
    formatNum (num) {
      if (isFunction(this.formatTotal)) {
        return this.formatTotal(num)
      }

      return Number(num)
    },
    formatLabel (item) {
      if (isFunction(this.format)) {
        return this.format(item)
      }

      return item.name
    },
    hasSelected (item) {
      return this.value.name === item.name && this.value.id === item.id
    },
    onSelect (item) {
      this.$emit('input', item)
      this.$emit('event:select', item)
    },
    onDelete (item) {
      this.$emit('event:delete', item)
    },
    onScroll (e) {
      const eventDelta = e.wheelDelta || -e.deltaY * 40
      this.$refs['scroll-pane'].scrollLeft = this.$refs['scroll-pane'].scrollLeft + eventDelta / 4
      this.$emit('event:scroll')
    },
    onCollapse () {
      this.currentCollapse = !this.currentCollapse
      this.$emit('event:collapse', this.currentCollapse)
    },
    openFastMenu () {
      this.$emit('event:guide', this.stickyElements, this.customElements, this.options)
    }

  }

}
</script>
<style lang="scss" scoped>
.b-fast {
  padding: 16px 16px 0 0;
  border-bottom: 1px solid #f0f0f0;
  &--disabled {
    pointer-events: none;
    cursor: not-allowed;
  }
  &-item {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    &:last-of-type {
      border-right: 1px solid #f0f0f0;
    }
  }
  &__wrapper {
    white-space: nowrap;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      height: 1px;
    }

    &-sticky {
      z-index: 9;
      left: 0;
    }
  }
}
</style>
